<template>
  <div class="msg-box">
    <div v-if="isyou" class="item me">
      <!-- 头像 -->
      <div class="photo">
        <my-photo  line-height="34px" :userName="userName" :userId="userId" :photo="photo"></my-photo>
      </div>
      <!-- 消息 -->
      <div class="msg">{{content}}</div>
    </div>

    <div class="item you" v-if="!isyou">
      <!-- 消息 -->
      <div class="msg">{{content}}</div>
      <!-- 头像 -->
      <div class="photo">
        <my-photo line-height="34px" :userName="userName" :userId="userId" :photo="photo"></my-photo>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "msg-box",
  props: ["content", "user", "isyou","userName","userId","photo"],
  data: function() {
    return {};
  },
  created: function() {
    //console.log("creaded", this.user);
  },
  mounted: function() {
    console.log("mout", this.userName);
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.msg-box {
  padding: 8px 20px;
  .photo {
    height: 34px;
    width: 34px;
    border-radius: 17px;
    overflow: hidden;
  }
  .item {
    display: flex;
    width: 45%;
    .msg {
      margin: 0 0 0 10px;
      padding: 10px;
      border-radius: 5px;
      background-color: #dddddd;
    }
  }
  .you {
    margin: 0 0 0 auto;
    justify-content: flex-end;
    .msg {
      margin: 0 10px 0 0;
    }
  }
  .msg {
    max-width: 200px;
  }
}
</style>